import { Button, message, Space } from 'antd';
import styles from './index.module.less';
import { useEffect, useState } from 'react';
import { arrayToEnum2 } from '@/utils';
import { priceTypeOptions } from '@/utils/helper';
import { delZhiYingApi } from '@/api';

export default function ZhiYingBFList({ formData, setShowBFList, closeModal }: any) {
  const [loading, setLoading] = useState(false);
  const [loadingAll, setLoadingAll] = useState(false);
  const isZuoDuo = formData?.newSize > 0;
  const allList = formData?.zhiYingSunData?.buFenCang?.list;

  useEffect(() => {}, []);

  // 全部撤销
  function cancelAll() {
    setLoadingAll(true);
    const ids = allList.map((item: any) => item?.id_string);
    batchCancle(ids);
  }

  // 批量取消
  async function batchCancle(ids: any[]) {
    const newIds = ids.filter((item: any) => item);
    try {
      Promise.allSettled(newIds.map((item: any) => cancle(item)));
      message.success('成功');
    } catch (error) {
      console.log('error: ', error);
    } finally {
      setLoadingAll(false);
      setLoading(false);
      closeModal();
    }
  }

  async function cancle(order_id: string) {
    return await delZhiYingApi({ order_id });
  }

  // 是否止盈
  const isZhiying = (rule: number) => {
    if (isZuoDuo) {
      return rule === 1;
    } else {
      return rule === 2;
    }
  };

  // 处理数量
  function handleNum(num: number) {
    const _num = Math.abs(num) * formData?.contractInfo?.quanto_multiplier;
    const unit = formData?.contractInfo?.name?.split('_')[0];
    return `${_num} ${unit}`;
  }

  return (
    <div className={styles.ZhiYingBFList}>
      <div className={`${styles.bfoptions} flex`}>
        <Space className={`${styles.bts} flex`}>
          <Button loading={loadingAll} onClick={cancelAll}>
            全部撤销
          </Button>
          <Button type="primary" onClick={() => setShowBFList(false)}>
            添加
          </Button>
        </Space>
      </div>
      <div className={`${styles.bflist} flex`}>
        {allList?.map((item: any, i: number) => (
          <div className={`${styles.bftitem}`} key={i}>
            <div className={`${styles.iteminner}`}>
              <div className={`${styles.row}`}>
                <span className={`${styles.tit}`}>
                  {isZhiying(item?.trigger?.rule) ? '止盈' : '止损'}触发价：
                </span>
                <span
                  className={`${styles.num} ${isZhiying(item?.trigger?.rule) ? 'color-red ' : 'color-green'}`}
                >
                  {item?.trigger?.price}({arrayToEnum2(priceTypeOptions)[item?.trigger?.price_type]}
                  )
                </span>
              </div>
              <div className={`${styles.row}`}>
                <span className={`${styles.tit}`}>
                  {isZhiying(item?.trigger?.rule) ? '止盈' : '止损'}委托价：
                </span>
                <span className={`${styles.num}`}>
                  {!item ? (
                    '--'
                  ) : (
                    <>{item?.initial?.tif === 'ioc' ? '市价' : item?.initial?.price}</>
                  )}
                </span>
              </div>
              <div className={`${styles.row}`}>
                <span className={`${styles.tit}`}>数量：</span>
                <span className={`${styles.num}`}>{handleNum(item?.initial?.size)}</span>
              </div>
              <div className={`${styles.bfbot}`}>
                <Button
                  loading={loading}
                  onClick={() => {
                    setLoading(true);
                    batchCancle([item?.id_string]);
                  }}
                >
                  撤销
                </Button>
              </div>
            </div>
          </div>
        ))}
      </div>
      <div className={`${styles.xxx}`}></div>
    </div>
  );
}
